<!-- 行业大盘 -->
<template>
  <div class="app">
    <!-- 选择领域，最后更新时间 -->
    <div class="block">
      <div class="firstLine">
        <el-select v-model="currentIndustry">
          <el-option
            v-for="item in industryArray"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        近30天数据大盘
      </div>
      <div class="secondLine">数据更新时间：{{ lastUpdateTimeStr }}</div>
    </div>
    <!-- 数据总览 -->
    <div class="block"><data-trend /></div>
    <!-- 行业流量综合趋势柱状折线图 -->
    <div class="block"><traffic-trend-chart /></div>

    <div class="block">
      <el-row>
        <el-col :span="24">
          <el-row :gutter="20">
            <el-col :span="8"><video-pie-chart /></el-col>
            <el-col :span="8"><video-data-table /></el-col>
            <el-col :span="8"><comment-words-cloud /></el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="block">
      <el-row :gutter="20">
        <el-col :span="12"><hot-products-table /></el-col>
        <el-col :span="12"><hot-brands-table /></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import DataTrend from "./components/DataTrend.vue";
import TrafficTrendChart from "./components/TrafficTrendChart.vue";
import VideoPieChart from "./components/VideoPieChart.vue";
import VideoDataTable from "./components/VideoDataTable.vue";
import CommentWordsCloud from "./components/CommentWordsCloud.vue";
import HotProductsTable from "./components/HotProductsTable.vue";
import HotBrandsTable from "./components/HotBrandsTable.vue";

export default {
  name: "",
  data: function () {
    return {
      currentIndustry: "",
      lastUpdateTimeStr: "2021-05-27 01:00:00",
      industryArray: [{ name: "母婴", label: "母婴" }],
    };
  },

  components: {
    DataTrend,
    TrafficTrendChart,
    VideoPieChart,
    VideoDataTable,
    CommentWordsCloud,
    HotProductsTable,
    HotBrandsTable,
  },

  computed: {},

  mounted: function () {
    this.fetch();
  },

  methods: {
    async fetch() {
      const { data: resp } = this.$http.get("/market/IndustryOverview");
      if (resp.status == 400) return this.$message.error(resp.msg);
      console.log(resp.data);
    },
  },
};
</script>
<style lang="scss" scoped>
.app {
  height: 100%;
  width: 100%;

  .block {
    width: 100%;
    padding: 10px;

    .firstLine {
      font-size: 1.5em;
      text-align: center;
      color: red;
    }
    .secondLine {
      font-size: 0.8em !important;
      text-align: center;
      margin-top: 10px;
    }
  }
}
</style>
